<template>

    <div class="navbar-back">
        <div class="navbar-logo">
            <span @click="$router.push({ path: '/' })">
                <a href="javascript:;" v-show="sidebarFold">
                    <img src="@/assets/logo-collapse.png"/>
                </a>
                <a href="javascript:;" v-show="!sidebarFold">
                    <img src="@/assets/logo-text-yunglee.png"/>
                </a>
            </span>
        </div>

        <div class="navbar-back-menu">

            <!-- 折叠操作 -->
            <el-button type="text" class="navbar-back-menu-switch" index="0" @click="sidebarFold = !sidebarFold">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </el-button>

            <!-- 公用信息 -->
            <div :class="[!sidebarFold?'navbar-back-menu-git':'navbar-back-menu-git-collapse']">
                <el-button type="text"
                           class="navbar-back-menu-button"
                           @click="href('https://gitee.com/blog3-comeback/blog3')"
                            title="git源码地址"
                >
                    <i class="fa fa-git" aria-hidden="true"></i>
                </el-button>
            </div>
            <user-show :is-login="isLogin" :user-info="userInfo"></user-show>

        </div>

    </div>

</template>

<script>
    import {mapState} from 'vuex'
    import userShow from '@/components/user/user-show'

    /**
     * 维护后台上面菜单 - logo、用户信息
     */
    export default {
        name: "navBar",
        components:{userShow},
        computed: {
            sidebarFold: {
                get() {
                    return this.$store.state.common.sidebarFold
                },
                set(val) {
                    this.$store.commit('updateSidebarFold', val)
                }
            },
            ...mapState({
                userInfo: state => state.common.userInfo,
                isLogin:state => state.common.userInfo.username?true:false,
            }),
        },
        methods: {
            href(url) {
                // window.location.href=url;
                window.open(url);
            },
            sidebarFoldChange(){
                let fullWidth = document.documentElement.clientWidth;
                if(fullWidth < 520){
                    this.sidebarFold = true;
                }else{
                    this.sidebarFold = false;
                }
            },
        },
        created(){
            window.addEventListener('resize', () => this.sidebarFoldChange());
        },
    }
</script>

<style scoped>

    .navbar-back {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
        height: 60px;
        width: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
        background-color: white;
    }

    .navbar-logo {
        height: 100%;
        float: left;
        background-color: transparent;
        border-bottom: 0;
    }

    .navbar-logo img {
        height: 100%;
    }

    .navbar-back-menu {
        float: left;
        height: 45px;
    }

    .navbar-back-menu-switch {
        margin-top: 10px;
        margin-left: 10px;
    }

    .navbar-back-menu-git {
        position: absolute;
        top: 10px;
        left: 220px;
        height: 100%;
    }

    .navbar-back-menu-git-collapse {
        position: absolute;
        top: 10px;
        left: 100px;
        height: 100%;
    }

    .navbar-back-menu-button {
        margin: 0px 20px;
    }


</style>
